import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Main extends Component {

    static propTypes = {
        monitor: PropTypes.object,
    }

    removeTaskByID= (id) => {
        return () => {
            this.props.monitor.removeTaskByID(id)
        }
    }

    setHaveDone = (id) => {
        return () => {
            this.props.monitor.setHaveDone(id)
        }
    }

    render() {
        const {taskList} = this.props.monitor.state
        return (
            <div className="taskBox">
                {taskList.map( item => (
                    <div key={item.id} className="taskItem">
                        <input type="checkbox" key={item.haveDone} id="checkBox" defaultChecked={item.haveDone} onChange={this.setHaveDone(item.id)}/>
                        <span>{item.task}</span>
                        <button className="btn" onClick={this.removeTaskByID(item.id)}>删除任务</button>
                    </div>)
                    )
                }
            </div>
        )
    }
}
